<template>
  <div>
   <!--  {{this.type}} -->
    <div class="mui-card">
        <div class="mui-card-header">
          <span>{{title}}</span>
          <span>
            <router-link :to="{name:'toDisplayMore',params:{type:this.type,title:this.title}}">更多</router-link>
            <!-- <router-link :to="'/displayMore/'+ this.type">更多</router-link> -->
          </span>
        </div>
        <div class="mui-card-content">
          <div class="mui-card-content-inner myToday">
              <van-grid :border="false" :column-num="3">
                <van-grid-item v-for="item in firstList" :key="item.song_id" class="myBox"> <!--  -->
                  <router-link :to="'/playsongs/' + item.song_id" class="myTitle">
                    <van-image :src="item.pic_small" />
                    <p>{{item.title}}</p>
                  </router-link>
                </van-grid-item>
              </van-grid>
            
          </div>
        </div>
      </div>

    
  </div>
</template>
<script>
//import {getBillBoard} from '../../api/music_api.js'
export default {
  data() {
    return {
        firstList:[],
    };
  },
  props:{
    title:{
      type:String,
      default:"音乐列表"
    },
    type:String,
    size:String
  },
  created() {
    this.getMusicBillList();
    // getBillBoard(this.type,6).then(res=>{
    //   /* this.firstList.push(res) */
    //   console.log(res)
    // })
    // this.axios.get();
  },
  methods: {
    getMusicBillList() {
      const url =
      this.HOST + 
      `/v1/restserver/ting?method=baidu.ting.billboard.billList&type=${this.type}&size=${this.size}`;

      //返回的是一个promise对象
      //promise事链式调用
    this.$axios
    .get(url)
    .then(res => {
        //console.log(res)
        this.firstList = res.data.song_list;
    })
    .catch()
    }
  }
};
</script>
<style lang="" scoped>
.myBox {
  width: 33%;
}
.myTitle {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  text-align: center;
}
.mui-card {
  margin: 0;
  box-shadow: none;
  margin-bottom: 10px;
}
.mui-card-header span:nth-of-type(1) {
  font-size: 20px;
  font-weight: 700;
}
.mui-card-header span:nth-of-type(2) {
  font-size: 14px;
}
.van-grid-item span {
  font-size: 13px;
}
</style>